<template>
  <div style="width:100%;height:auto; margin:0 auto;">
    <el-form ref="ruleForm" :model="form" label-width="120px" label-position="left">
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item>
            <div slot="label">项目类型<font color="red">*</font></div>
            <el-select v-model="form.type" style="width:100%;" clearable @change="selectGoodsByGroupId($event)">
              <el-option v-for="item in xmTypes" :key="item.code" :label="item.name" :value="item.code" />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item>
            <div slot="label">项目编号<font color="red">*</font></div>
            <el-input v-model="sortNum" placeholder="项目编号" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="24">
          <el-form-item>
            <div slot="label">项目名称<font color="red">*</font></div>
            <el-input v-model="form.xiangmumingcheng" placeholder="项目名称" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item>
            <div slot="label">项目目录模型<font color="red">*</font></div>
            <el-select v-model="form.catalogId" style="width:100%;" clearable>
              <el-option v-for="item in mlList" :key="item.id" :label="item.name" :value="item.id" />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item>
            <div slot="label">是否展示api<font color="red">*</font></div>
            <el-select v-model="form.ifzs" style="width:100%;" clearable>
              <el-option v-for="item in ynTypes" :key="item.code" :label="item.name" :value="item.code" />
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <div style="text-align:center;">
      <el-button type="primary" @click="save('2')">提交</el-button>
      <el-button type="primary" @click="save('1')">保存</el-button>
      <el-button type="danger" @click="closePage">取消</el-button>
    </div>
  </div>
</template>

<script>
import { getInfo, edit, getSortNumByType } from '@/api/projectInfo'
import { getListByCode } from '@/api/catalogManage'
import { getDictListByCode } from '@/api/dict'
import { Message } from 'element-ui'

export default {
  inject: ['onLoadList'],
  props: { // 第二种方式
    proid: {
      type: String,
      required: true
    }
  },
  data() {
    return {
      form: {},
      sortNum: '',
      ynTypes: [],
      xmTypes: [],
      mlList: []
    }
  },
  created() {
    this.getDictList('CDS_XIANGMU_TYPE')
    this.getDictList('CDS_YON')
    this.getList()
  },
  methods: {
    getList() {
      getListByCode({ code: 'PROJECT_CATALOG' }).then(response => {
        this.mlList = response.data
      })
    },
    getDetailed() {
      const loading = this.$loading({
        lock: true,
        text: 'Loading',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
      })
      getInfo({ code: this.proid }).then(response => {
        this.form = response.data.projectInfo
        this.sortNum = response.data.projectInfo.sortNum

        loading.close()
      }).catch(function() {
        loading.close()
      })
    },
    getDictList(code) {
      getDictListByCode(code).then(response => {
        if (code === 'CDS_XIANGMU_TYPE') {
          this.xmTypes = response.data
        }
        if (code === 'CDS_YON') {
          this.ynTypes = response.data
        }
      })
    },
    selectGoodsByGroupId(val) { // 根据设备组id获取相应的商品
      this.sortNum = null
      if (val != null && val !== '' && val !== undefined) {
        getSortNumByType({ type: val }).then(response => {
          // 给goods数组赋值
          this.sortNum = response.data
        })
      }
    },
    save(flag) { // 编辑
      if (!this.form.type) {
        this.$message.error('项目类型不能为空！')
      } else if (!this.sortNum) {
        this.$message.error('项目编号不能为空！')
      } else if (!this.form.xiangmumingcheng) {
        this.$message.error('项目名称不能为空！')
      } else if (!this.form.catalogId) {
        this.$message.error('项目目录模型不能为空！')
      } else if (!this.form.ifzs) {
        this.$message.error('是否展示api不能为空！')
      } else {
        let title = null
        if (flag === '1') {
          title = '保存'
        } else {
          title = '提交'
        }
        this.$confirm('确定要' + title + '此项目吗, 是否继续?', title + '项目', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          const loading = this.$loading({
            lock: true,
            text: 'Loading',
            spinner: 'el-icon-loading',
            background: 'rgba(0, 0, 0, 0.7)'
          })

          this.form.sortNum = this.sortNum
          this.form.status = flag
          edit(this.form).then(response => {
            Message({
              message: '编辑成功',
              type: 'success',
              duration: 5 * 1000
            })

            this.$emit('update:visible', false)
            loading.close()
            this.onLoadList()
          }).catch(response => {
            loading.close()
            this.onLoadList()
          })
        })
      }
    },
    closePage() {
      this.$emit('update:visible', false)
    }
  }
}
</script>

<style scoped>

</style>
